<template>
  <div>
    <el-dialog
      v-model="isShow"
      :title="$demoi18n('table.defaultEventSetting.dailogTitle')"
      width="650px"
      top="8.4vh"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div class="extension-setting-main">
        <el-form
          ref="form"
          class="form"
          label-position="right"
          :model="emitEventForm"
          :rules="rules"
          label-width="140px"
        >
          <VsFormItem :label="$demoi18n('word.enabled')">
            <el-switch v-model="emitEventForm.isEmitEvent"></el-switch>
          </VsFormItem>
          <div v-if="emitEventForm.isEmitEvent" class="config-table">
            <VsFormItem
              prop="rowIndex"
              :rules="genRulesByKey('table.defaultEventLine')"
              :label="$demoi18n('table.defaultEventLine')"
            >
              <el-input-number
                v-model="emitEventForm.rowIndex"
                style="width:200px"
                :min="1"
                :max="1000"
                :step="1"
              />
            </VsFormItem>
          </div>
        </el-form>
        <div class="action-button-group">
          <el-button
            class="button-sure"
            size="default"
            type="primary"
            @click="handleSave()"
          >{{
            $demoi18n('btn.confirm')
          }}</el-button>
          <el-button
            class="button-cancel"
            size="default"
            @click="cancel()"
          >{{ $demoi18n('btn.close') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { genRulesByKey } from '@/utils/rules';
export default {
  name: 'ExtensionSetting',
  mixins: [],
  props: ['form', 'config', 'activeColorRadio', 'activeColorSwitch', 'nameList', 'fieldList'],
  emits: ['save'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      xvueTheme: window._adoPremise.uc.theme,
      customClass: `extension-setting-dialog extension-setting-dialog-${window._adoPremise.uc.theme || 'light'}`,
      isShow: false,
      emitEventForm: {},
      rules: {},
    };
  },
  methods: {
    genRulesByKey,
    openDialog() {
      const { emitEvent } = this.form;
      this.emitEventForm = JSON.parse(JSON.stringify(emitEvent));
      this.isShow = true;
    },
    cancel() {
      this.isShow = false;
    },

    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        this.$emit('save', this.emitEventForm);
        this.cancel();
      });
    },
    changeEventType() {
      this.emitEventForm.rowIndex = null;
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.extension-setting-dialog {
  .extension-setting-main {
    .form {
      width: 100%;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .config-table {
        .extension-setting-tip{
          font-size: 12px;
          color: #00aaff;
          margin-left: 10px;
          display: inline-flex;
          align-items: center;
          vertical-align: sub;
        }
        :deep(.el-table) {
          .el-form-item__error {
            top: 100%;
            padding-top: 0;
          }
          .is-error {
            margin-bottom: 15px;
          }
          .cell {
            padding: 0 3px !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .extension-column {
              display: flex;
              align-items: center;
            }
            .el-input__inner {
              padding: 0 5px !important;
            }
          }
          td,
          th {
            padding: 5px 0 !important;
            overflow:hidden;
          }
          th div {
            display: inline;
            line-height: 15px;
          }
          .el-table__row > td {
            border: none;
          }
        }
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }
      }
    }
  }

  .action-button-group {
    text-align: right;
    padding-top: 20px;
    .button-sure {
      padding: 9px 35px;
      border-radius: 0;
    }
    .button-cancel {
      padding: 9px 35px;
      border-radius: 0;
    }
  }
}
</style>

<style lang="less">
@font_color_dark: #98cae6;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
@bgColor_dark: #000c17;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
.extension-setting-dialog-dark {
  .el-dialog__header {
    background: #183c5a;
    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    background: #0e2b40;

    .el-form-item__label {
      color: @font_color_dark;
    }

    .el-input {
      .el-input__inner {
        border-color: @borderColor_dark;
        color: @textColor_dark;
        background-color: @bgColor_dark;
      }

      .el-input__icon {
        color: @borderColor_dark;
      }
    }
    // 表格
    .config-panel-table {
      color: @font_color_dark;
      background-color: @background_color_dark;

      &::before {
        background-color: @background_color_dark;
      }

      .cell {
        padding: 0 3px !important;
        .el-tag--info {
          background-color: #1f1f1f;
          border-color: #1f1f1f;
          color: #fff;
          .el-tag__close {
            color: #fff;
            background-color: #102e4f;
          }
        }
      }
      td,
      th {
        padding: 5px 0 !important;
      }

      .el-table__header {
        th {
          background-color: #122b40 !important;
          border-color: #122b40;
          color: @font_color_dark;
        }
      }

      .el-table__body {
        tr {
          td {
            background-color: @background_color_dark;
            border-color: @background_color_dark;

            .icon-library-open {
              background-color: unset;
              border-color: #0eb4c2;
            }
          }
        }
      }

      .el-table__empty-block {
        background-color: #093758;

        .el-table__empty-text {
          color: @font_color_active_dark;
        }
      }
    }

    .button-sure {
      background-color: #0eb4c2;
      border-color: #0eb4c2;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }

    .button-cancel {
      background-color: #064559;
      border-color: #064559;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }
  }
}
</style>
